<template>
	<div class="talion-view">
    <div class="header-bar">
      <span class="talion-close" @click="closeTalion">关闭</span>
      <form class="talion-search" @submit.prevent>
        <input
          type="search"
          name='query'
          v-model.trim.lazy="queryStr"
          @keyup.enter="goSearch"
        >
      </form>
    </div>
    <ul class="talion-classify has-header">
      <li>
        <router-link :to="{ name:'HomeView' }">
          <strong  style="color:rgb(35, 132, 232)">电影</strong>
          <span>电影热映</span>
        </router-link>
        <router-link :to="{ name:'HomeView' }">
          <strong  style="color:rgb(122, 106, 219)">电视</strong>
          <span>正在热播</span>
        </router-link>
        <router-link :to="{ name:'HomeView' }">
          <strong  style="color:rgb(159, 120, 96)">图书</strong>
          <span>畅销排行</span>
        </router-link>
      </li>
      <li>
        <router-link :to="{ name:'HomeView' }">
          <strong  style="color:rgb(230, 70, 126)">同城</strong>
          <span>电影热映</span>
        </router-link>
        <router-link :to="{ name:'HomeView' }">
          <strong  style="color:rgb(42, 184, 204)">小组</strong>
          <span>正在热播</span>
        </router-link>
        <router-link :to="{ name:'HomeView' }">
          <strong  style="color:rgb(244, 143, 46)">音乐</strong>
          <span>畅销排行</span>
        </router-link>
      </li>
      <li>
        <router-link :to="{ name:'HomeView' }">
          <strong  style="color:rgb(159, 120, 96)">阅读</strong>
          <span>电影热映</span>
        </router-link>
        <router-link :to="{ name:'HomeView' }">
          <strong  style="color:rgb(87, 116, 197)">游戏</strong>
          <span>正在热播</span>
        </router-link>
        <router-link :to="{ name:'HomeView' }">
          <strong  style="color:rgb(89, 108, 221)">应用</strong>
          <span>畅销排行</span>
        </router-link>
      </li>
      <li>
        <router-link :to="{ name:'HomeView' }">
          <strong  style="color:rgb(225, 100, 77)">东西</strong>
          <span>电影热映</span>
        </router-link>
        <router-link :to="{ name:'HomeView' }">
          <strong  style="color:rgb(64, 207, 169)">FM</strong>
          <span>正在热播</span>
        </router-link>
        <router-link :to="{ name:'HomeView' }">
          <strong  style="color:rgb(66, 189, 86)">音乐</strong>
          <span>畅销排行</span>
        </router-link>
      </li>
    </ul>
    <sub-nav mold="navBottom"></sub-nav>
  </div>
</template>
<script>
import Bus from '../common/bus.js'
import SubNav from '../components/SubNav'
export default {
  name: 'talion-view',
  components: { SubNav },
  data () {
    return {
      queryStr: ''
    }
  },
  methods: {
    closeTalion: function () {
      this.$emit('closeTalion')
    },
    /*
    * going to search view
    * params:q
    * */
    goSearch: function () {
      this.$emit('closeTalion')
//    console.log(this.queryStr)
//    路由跳转并传值
      this.$router.push({
        name: 'SearchView',
        params: {
          q: this.queryStr
        }
      })
//    同一页面兄弟组件传值
      Bus.$emit('changeInput', this.queryStr)
    }
  }
}
</script>
<style lang="scss" scoped>
  .talion-view{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: #fff;
    .talion-close{
      font-size:1.6rem;
      color: #42bd56;
    }
    .talion-search{
      flex:1;
      margin-left:1rem;
      input[type=search]{
        width:100%;
        line-height:3.2rem;
        border:none;
        border-radius: 0.3rem;
        font-size:1.4rem;
        background: url(../assets/search.png) no-repeat center #f3f3f3;
        background-size:1.73rem;
      }
      input[type=search]:focus{
        background: #f3f3f3;
      }
    }
    .talion-classify{
      padding-top:2.5rem;
      li{
        display:flex;
        margin-bottom:2.5rem;
      }
      a{
        display:flex;
        flex:1;
        flex-direction: column;
      }
      span,strong{
        text-align: center;
      }
      strong{
        font-weight:  normal;
        font-size:2.4rem;
        line-height:2.8rem;
      }
      span{
        color:#999
      }
      border-bottom: 1px solid #f3f3f3;
    }
  }
</style>f
